<template>
	<div :style="styles" class="statistical">
		<slot>
			<div class="flex justify-center w-full flex-col h-full">
				<div class="text-[14px] text-white font-bold" :style="{ marginBottom }">{{ leftName }}</div>
				<div class="flex items-center w-full justify-between">
					<div class="flex flex-col text-white justify-center">
						<div class="font-bold text-[32px] h-[46px] leading-[46px]">
							{{ leftValue }}
						</div>
					</div>
					<div class="flex flex-col text-white">
						<div class="text-[14px] font-400 text-right" :style="{ marginBottom: rightMarginBottom }">
							<img class="w-[16px] h-[8px] mr-[8px]" src="@/assets/images/statistical/icon.png" />
							{{ rightValue }}
						</div>
						<div class="text-[14px] font-400">{{ rightName }}</div>
					</div>
				</div>
			</div>
		</slot>
	</div>
</template>

<script>
import CountTo from 'vue-count-to';

export default {
	components: {
		CountTo,
	},
	props: {
		leftName: {
			type: String,
			default: '',
		},
		leftValue: {
			type: [String, Number],
			default: null,
		},
		rightName: {
			type: String,
			default: '',
		},
		rightValue: {
			type: [String, Number],
			default: null,
		},
		bgColor: {
			type: String,
			default: 'linear-gradient(226deg, #606DD2 0%, #2838C5 100%)',
		},
		marginBottom: {
			type: String,
			default: '30px',
		},
		rightMarginBottom: {
			type: String,
			default: '2px',
		},
	},
	data: () => ({}),
	computed: {
		styles() {
			return {
				background: this.bgColor,
			};
		},
	},
};
</script>

<style lang="scss" scoped>
.statistical {
	background: linear-gradient(270deg, #32c2fe 0%, #6786fe 100%);
	@apply w-full rounded-[4px] py-[12px] px-[32px] flex justify-between items-end;
}
</style>
